<template>
  <div class="login">
    <div class="login-center">
      <div class="login-form">
        <div class="form-top"></div>
        <el-row class="form-logo">
          <el-col :span="6" :offset="9">
            <b class="el-icon-goods"></b>
          </el-col>
        </el-row>
        <el-row class="form-title">
          <el-col :span="24">
            <b>mall-admin-web</b>
          </el-col>
        </el-row>
        <el-row class="form-content">
          <el-col :span="22" :offset="1">
            <el-input
              placeholder="请输入内容"
              v-model="user.username"
              >
              <i slot="prefix" class="el-input__icon el-icon-user-solid login-icon"></i>
            </el-input>
          </el-col><br><br><br>
          <el-col :span="22" :offset="1">
            <el-input
              placeholder="请输入内容"
              v-model="user.pwd"
              show-password
              >
              <i slot="prefix" class="el-input__icon el-icon-lock login-icon"></i>
            </el-input>
          </el-col>
          <br><br><br>
          <el-row>
            <el-col :span="11" :offset="1">
              <el-input placeholder="请输入验证码" v-model="code"></el-input>
            </el-col>
            <el-col :span="11" :offset="1">
              <img class="code-img" :src="codeUrl" @click="changeCode">
            </el-col>
          </el-row>
        </el-row>
        <el-row class="form-btn">
          <el-col :span="10" :offset="2">
            <el-button class="login-btn" type="primary" @click="login">登录</el-button>
          </el-col>
          <el-col :span="10"  :offset="1">
            <el-button class="login-btn" type="primary" @click="register">注册</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:"Login",
    data() {
      return {
        user:{
          username:'tianshuo',
          pwd:'wjn040316',
          deviceId:1,
          deviceName:'华为'
        },
        codeUrl:'',
        randomNum:Math.random(),
        code:'',
      }
    },
    methods: {
      login(){
        if(this.user.username.trim()!==''&&this.user.pwd.trim()!==''){
        // this.$http({
        //   url:'/user/username/login',
        //   method:'post',
        //   data:this.user
        // }).then(res=>{
        //   console.log(res);
        //   if(res.data.code==500){
        //     this.$message.error(res.data.msg)
        //   }else if(res.data.code==0){
        //     this.$message.success('登录成功')
        //     window.sessionStorage.setItem('token',res.data.data.token)
        //     this.user={
        //       username:'',
        //       pwd:'',
        //       deviceId:1,
        //       deviceName:'华为'
        //     }
        //     this.$router.push('/layout')
        //   }
        // })

        this.$net({
          url:'/login/operator/v2',
          method:'post',
          data:{
            imgcode:this.code,
            k:this.randomNum,
            merchantId:'36387',
            pwd:this.user.pwd,
            userName:this.user.username,

          }
        }).then(res=>{
          this.getCodeImg()
          if(res.data.code==0){
            window.sessionStorage.setItem('token',res.data.data.token)
            this.$router.push('/home')
          }
        })
        }else{
        this.$message.error('输入框不能为空');
        }
      },
      register(){
        this.$router.push('/register')
      },
      getCodeImg(){
        this.$net({
          url:'/code',
          params:{
            k:this.randomNum,
            
          },
          responseType:'arraybuffer',
        }).then(res=>{
          this.codeUrl='data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data,
							byte) => data + String.fromCharCode(byte), '')); 
        })
      },
      changeCode(){
        this.getCodeImg()
      }
    },
    created() {
      this.user.username=this.$route.query.username
      this.user.pwd=this.$route.query.pwd
      this.getCodeImg()
    },
  }
</script>

<style lang="less" scoped>
.login{
  width: 100vw;
  display: flex;
  height: 100vh;
  align-items: center;
  .login-center{
    width: 100%;
    height: 200px;
    background: #409eff url('../assets/imgs/login_center_bg.png');
    // background-repeat: round;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    .login-form{
      width: 350px;
      height: 400px;
      box-shadow: 0 5px 5px 2px #eee;
      border-radius: 3px;
      overflow: hidden;
      background: #fff;
      .form-top{
        height: 15px;
        background: #409eff;
      }
      .form-logo{
        color: #409eff;
        font-size: 80px;
        text-align: center;
      }
      .form-title{
        color: #409eff;
        text-align: center;
        font-size: 24px;
      }
      .form-content{
        margin-top: 20px;
        .login-icon{
          color: #409eff;
        }
      }
      .form-btn{
        margin-top: 10px;
        .login-btn{
          width: 90%;
        }
      }
    }
  }
}
.code-img{
  width: 90%;
  height: 40px;
}
</style>